<!-- 用户评价 -->
<template>
  <div v-if="Object.keys(say).length!==0" class="box">
    <div class="user">
        <span>用户评价</span>
        <span>更多</span>
    </div>
    <div class="uname">
        <img :src="say.user.avatar" alt="">
        <span>{{say.user.uname}}</span>
    </div>
    <div class="usay">
         <p>{{say.content}}</p>
         <div>
             <!-- 从服务器取从的评论时间是时间戳 要转化 搞一个过滤器 -->
             <span>{{say.created | showDate}}</span>
             <span class="style">{{say.style}}</span>
         </div>
    </div>
    <div v-show="say.image">
        <img   v-for="(item,index) in say.images" :key="index"    :src="item"/>
    </div>
  </div>
</template>

<script>
import {formatDate} from "common/utils.js" //导入工具类函数
export default {
  name:"say",
  props: {
       say:{
            type:Object,
            default(){
                 return {}
            }
       }
  },
  filters: {
      //value 就是要过滤的值
       showDate(value){
            const date =new Date(value*1000)
            return formatDate(date,"yyyy-MM-dd")
       }
  }

}

</script>
<style  scoped>
    .box{
         margin-left: 10px;
    }
    .user{
         display: flex;
         /* 子元素两边贴紧 */
        justify-content: space-between; 
        border-bottom: 1px solid gray;
        border-top: 1px solid gray;
        height: 40px;
        line-height: 40px;
    }
    .uname{
        margin-top: 10px;
    }
    .uname>img{
           height:40px;
           vertical-align: middle;
    }
    .uname>span{
        margin-left: 15px;
    }
    .usay{
         margin-top: 10px;
         font-size: 12px;
    }
    .usay>div{
          color: gray;
    }
    .style{
         display: inline;
         margin-left: 5px;
    }
</style>